<template>
    <div>
        生命周期
        app-{{ title }}
        <div id="main" :style="{ width: mywidth, height: '400px' }" v-if="isUN"></div>
        <button @click="handleClick()">点击更改main高度</button>
        <button @click="handleUnClick()">点击销毁</button>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data() {
        return {
            title: '111',
            mywidth: '100%',
            // 易于阅读,这里可以只写一个初始化,在实例创建完成后再对其初始化
            option: {},
            isUN: true,

        }
    },
    beforeCreate() {   //实例初始化创建之前  在脚手架中无用,因为无法读取到数据 
        console.log('实例初始化创建之前', this.title);
    },
    created() {
        //实例刚刚初始化完成,可以访问到状态数据了,但是还没有进入到模版编译过程 无法访问到模版中的DOM,但是可以访问模版外的DOM
        console.log('实例初始化创建之后', this.title, document.querySelector('#main'));
        // 实例创建完成后对其初始化
        this.option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                }
            ]
        }
    },
    beforeMount() {
        //实例挂载之前   还是没有进入到模版编译过程
        console.log('实例挂载之前', document.querySelector('#main'),);
    },
    mounted() {         //实例挂载完成
        console.log('实例挂载之后', document.querySelector('#main'),);
        // 订阅发布
        //ajax   注意: 因为ajax是异步的 从发送请求到收到响应有响应时间,而vue的生命周期执行可能只需要1ms,所以会产生错觉,但是还是建议写在mounted中
        // setinterval
        // 访问dom

        //使用echarts库创建一个图表
        //echarts库下载 npm i echarts
        // 基于准备好的dom，初始化echarts实例  
        //在生命周期中声明的是临时变量 
        var myChart = echarts.init(document.getElementById('main'));
        // this.myChart = echarts.init(document.getElementById('main'));
        // 绘制图表 使用
        // this.myChart.setOption(this.option);
        myChart.setOption(this.option);
        window.onresize = () => {
            console.log('resize');
            myChart.resize();
        }
    },
    methods: {
        //注意: 更新dom是一个异步过程,如果更新完dom立即对该dom进行操作不会生效
        handleClick() {
            this.mywidth = '800px';
            //this.myChart.resize(); 这里不会生效,因为更新dom是异步过程
            // this.$nextTick()是一次性的监听器,下一次的dom更新之后,它会进行回调,它的执行比updated生命周期短
            // 比较专一,它
            this.$nextTick(() => {
                this.myChart.resize();
            })


        },
        handleUnClick() {
            console.log('销毁');
            this.isUN = !this.isUN;
        }

    },
    beforeUpdate() {
        console.log('实例更新之前,还没开始更新');
    },
    updated() {
        console.log('实例更新之后,注意它是所有状态更新完成后都会执行,并不区分是哪个状态');
        //resize()是echarts中的方法,作用是更新视图  
        // this.myChart.resize();
    },
    beforeUnmount() {
        console.log('实例销毁之前');
    },
    unmounted() {
        console.log('实例销毁之后');
        // 监听器解绑  
        window.onresize = null
    },
}
</script>